<!DOCTYPE html>
<html style="height:100%">
<head>
    <title></title>
    <% include ../../layouts/import.ejs %>
</head>
<body style="height:100%">
<% include ../../layouts/header.ejs %>
<div class=" height " style="background: #F8F6F2;">
    <% include ../../layouts/processHeader.ejs %>
    <div class="container main-content">
        <div class="row">
            <form id="mainForm" role="form" method="post" action="/process/feedBack/save">
                <div class="form-group form-group-sm">
                    <label class="col-self-one control-label pull-left">上传文件<span
                                style="color:red;font-weight:bolder">*</span>
                    </label>
                    <div class="col-self-two pull-right">
                        <div id="profile"></div>
                        <a href="javascript:void(0)" id="picker" data-design-id="1"
                           class="btn btn-default btn-xs btn-update person-edit">选择文件</a>
                        <a href="javascript:void(0)" id="ctlBtn" style="margin-left:10px"
                           class="btn btn-default btn-xs btn-del person-delete">开始上传</a>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </form>
        </div>
    </div>

    <% include ../../layouts/footer.ejs %>
</div>
<script>
    $(function () {
        $("#feedBack").addClass("click-change")
        $('#time').datetimepicker({
            format: 'yyyy-mm-dd hh:ii:ss',
            autoclose: true,
            todayBtn: true,
            todayHighlight: true,
            language: 'zh-CN'
        });
        $('#return').click(function () {
            location.href = '/process/feedBack/listAll';
        });
        var $btn = $('#ctlBtn');
        var state = 'pending';
        var uploadIdStr = $('#fileId').val();

        $.post('/operationFile/allFiles', function (result) {
                if (result != null) {
                    $.each(result.data, function (index, element) {
                        $("#profile").append('<div id="' + element.id + '" class="item">' +
                            '<h4 class="info">' + element.original_name + '</h4>' +
                            '<p class="state">已上传</p>' +
                            '<span class="deleteFile" id="' + element.id + '">X</span>' +
                            '</div>');
                    });
                }
            }
        )

        $(document).on('click', '.deleteFile', function () {
            var stateText = $(this).parent("div").children(".state").text();
            //id是div的id，此id是upload缓存内的id    deleteId为数据库内存储的id
            var id = $(this).parent("div").attr("id");
            var deleteId = $(this).parent("div").children(".deleteFile").attr("id");
            $(this).parent("div").remove();
            if (stateText !== "等待上传...") {
                $.getJSON('/operationFile/deleteFile/' + deleteId, function (result) {
                })
            }
            uploader.removeFile(id);
        })

        var uploader = WebUploader.create({

            // swf文件路径
            swf: '../../../punlic/webuploader-0.1.5/Uploader.swf',

            // 文件接收服务端。
            server: '/operationFile/uploadFile',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker',

            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false
        });

        // 当有文件被添加进队列的时候
        uploader.on('fileQueued', function (file) {
            $("#profile").append('<div id="' + file.id + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' +
                '<span class="deleteFile">X</span>' +
                '</div>');
        });

        uploader.on('uploadSuccess', function (file, response) {
            $('#' + file.id).find('p.' + 'state').text('已上传');
            var uploadId = response.data ? response.data.id : '';
            $('#' + file.id).find('span.' + 'deleteFile').attr('id', uploadId);
            var fileId = $('#fileId').val()
            if (fileId != "") {
                $('#fileId').val(fileId + "," + uploadId);
            } else {
                $('#fileId').val(uploadId);
            }
        });

        uploader.on('uploadError', function (file) {
            $('#' + file.id).find('p.state').text('上传出错');
        });

        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').fadeOut();
        });

        uploader.on('all', function (type) {
            if (type === 'startUpload') {
                state = 'uploading';
            } else if (type === 'stopUpload') {
                state = 'paused';
            } else if (type === 'uploadFinished') {
                state = 'done';
            }
            if (state === 'uploading') {
                $btn.text('暂停上传');
            } else {
                $btn.text('开始上传');
            }
        });

        $btn.on('click', function () {
            if (state === 'uploading') {
                uploader.stop();
            } else {
                uploader.upload();
            }
        });
    })
</script>
</body>
</html>